<script setup lang="ts">
import "./styles/top.less";
import "./styles/top-mix.less";
import "./styles/mobile.less";
import "./styles/left.less";
import "./styles/left-mix.less";
import "./styles/full.less";
import "./styles/menu.less";
import logoLeft from "./components/logo-left/index.vue";
import logoTop from "./components/logo-top/index.vue";
import menuTop from "./components/menu-top/index.vue";
import menuLeft from "./components/menu-left/index.vue";
import collapseTop from "./components/collapse-top/index.vue";
import collapseBottom from "./components/collapse-bottom/index.vue";
import breadcrumb from "./components/breadcrumb/index.vue";
import search from "./components/search/index.vue";
import fullScreen from "./components/full-screen/index.vue";
import bell from "./components/bell/index.vue";
import language from "./components/language/index.vue";
import user from "./components/user/index.vue";
import setting from "./components/setting/index.vue";
import tab from "./components/tab/index.vue";
const main = useMainStore();
</script>

<template>
  <div :class="['administrator', main.collapse && 'collapse']">
    <div
      :class="['menu-left-mask', main.collapse && 'collapse']"
      pos="fixed"
      @click="main.collapse = !main.collapse"
    ></div>
    <aside>
      <logo-left />
      <menu-left />
      <collapse-bottom />
    </aside>
    <header>
      <logo-top />
      <collapse-top />
      <breadcrumb />
      <menu-top />
      <search />
      <bell />
      <full-screen />
      <language />
      <user />
      <setting />
    </header>
    <nav>
      <tab />
    </nav>
    <main>
      <router-view #="{ Component }">
        <transition mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </main>
    <!-- <footer></footer> -->
  </div>
</template>
<style lang="less">
header .hover {
  transition: background-color 0.2s;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 10px;

  &:hover {
    background-color: rgb(var(--background-color-invert) / 8%);
    cursor: pointer;
  }
}
</style>
<style lang="less" scoped>
.administrator {
  display: grid;
  height: 100vh;

  grid-template-columns: min-content 1fr;
  grid-template-rows: min-content min-content 1fr;

  aside {
    width: var(--aside-width);
    margin-right: var(--aside-margin-right);
    transition: width 0.2s, margin-right 0.2s;
    background-color: var(--menu-bg-color);
    display: flex;
    flex-direction: column;
  }

  header {
    height: 48px;
    display: flex;
    align-items: center;
    background-color: var(--header-background-color, rgb(var(--background-color-secondary)));
  }

  nav {
    border: 1px solid rgb(var(--background-color-invert) / 10%);
    border-left: 0;
    border-right: 0;
    padding: 2px 0 1px;
    background-color: rgb(var(--background-color-secondary));
    overflow: auto;

    // &::-webkit-scrollbar {
    //   display: none;
    // }
  }

  main {
    padding: 16px;
    overflow-x: hidden;
  }
}
</style>

<style lang="less" scoped>
.v-enter-from,
.v-leave-to {
  opacity: 0;
  transform: translateX(10%);
}

.v-enter-from {
  transform: translateX(-10%);
}

.v-leave-active,
.v-enter-active {
  transition: all 0.2s ease;
}
</style>
